<template>
<el-container class="layout">
	<el-aside width="250px">
		<LeftBar></LeftBar>
	</el-aside>

	<el-container>
		<el-header>
			<Header />
		</el-header>

		<el-main class="contentParent">
			<el-container class="contentStage">
				<slot></slot>
			</el-container>
			<Footer />
		</el-main>

	</el-container>
</el-container>
</template>

<script>
import Header from '@/components/Header'
import LeftBar from '@/components/LeftBar'
import Footer from '@/components/Footer'

export default {
	data() {
		return {}
	},
	components: {
		Header,
		LeftBar,
		Footer
	}
}
</script>

<style scoped lang="scss">
.layout {
    .contentParent {
        display: flex;
        flex-direction: column;
        .contentStage {
            flex: 1;
        }
    }
}
</style>
